<%@ page import="com.xlro.service.BookService" %>
<%@ page import="com.xlro.domain.Book" %>
<%@ page import="java.util.ArrayList" %><%--
  Created by IntelliJ IDEA.
  User: xlro
  Date: 2021/5/30
  Time: 13:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>图书管理</title>
    <style>
        #top-image {
            background: linear-gradient(
                    rgba(0, 0, 0, 0.2),
                    rgba(0, 0, 0, 0.2)
            ), url('jQuery/images/1.jpg') no-repeat fixed;
            position:fixed ;
            top:0;
            width:100%;
            z-index:0;
            height:100%;
        }

        html,body{
            margin-top: 50px;
            margin-bottom: -100px;
            width: 100%;
            height: 100%;
            background: rgba(204,142,103, 0.3);

        }
    </style>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
</head>
<body >


<div id="top-image">
    <table class="layui-table" lay-data="{height:400,  page:true, id:'test'}" lay-filter="test">

        <thead>
        <tr>
            <th lay-data="{field:'id', width:110,sort: false}">图书ID</th>
            <th lay-data="{field:'name', width:200,sort: true}">书名</th>
            <th lay-data="{field:'author', width:200,sort: true}">作者</th>
            <th lay-data="{field:'position', width:110,sort: true}">位置</th>
            <th lay-data="{field:'status', width:80,sort: true}">状态</th>
            <th lay-data="{field:'desc',width:500   ,sort: true}">描述</th>
            <th lay-data="{field:'control',sort: true}">操作</th>
            <button name='btn1' type="button" class="layui-btn">新增</button>
        </tr>
        </thead>

        <tbody>
        <%
            BookService bookService = new BookService();
            ArrayList<Book> books = bookService.getAllBooks();
            request.setAttribute("books",books);
        %>


        <div class="layui-card">
            <% for (int i = 0; i < books.size(); i++) {
            Book book = books.get(i);%>
                <tr>
                    <td><%=book.getId()%></td>
                    <td><%=book.getName()%></td>
                    <td><%=book.getAuthor()%></td>
                    <td><%=book.getPosition()%></td>
                    <td><%=book.getStatus()%></td>
                    <td><%=book.getDesc()%></td>
                    <td>
                        <div class="layui-btn-group">
                            <button name='btn2'  id='<%=book.getId()%>' type="button" class="layui-btn">浏览一下</button>
                            <button name='btn3'  id='<%=book.getId()%>' type="button" class="layui-btn">删除这本</button>
                        </div>
                    </td>
                </tr>
            <% } %>
        </div>

        </tbody>
    </table>
</div>


<script src="layui/layui.js"></script>
<script src="jQuery/js/jquery-1.11.0.min.js"></script>
<script src="jQuery/js/ios-parallax.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#top-image').iosParallax({
            movementFactor: 500,
            dampenFactor: 100
        });
    });
</script>
<script>
    layui.use('table', function(){
        var table = layui.table;

        var element = layui.element;
        var $ = layui.$;

        $("[name=btn1]").click(function () {
            var layer = layui.layer;

            var id = $(this).attr("id");
            var title = $(this).attr("title");


            //iframe窗
            layer.open({
                type: 2,
                title: title,
                closeBtn: 1, //不显示关闭按钮
                maxmin: true, //开启最大化最小化按钮
                // shade: [0],
                shadeClose: true,
                shade: false,
                area: ['99%', '99%'],
                offset: 'ct', //弹出
                time: 0,
                anim: 2,
                content: ['./addBook.jsp?id='+id, 'no']
            });

        })


        $("[name=btn2]").click(function () {
            var id = $(this).attr("id");

            //iframe窗
            layer.open({
                type: 2,
                title: false,
                closeBtn: 1, //不显示关闭按钮
                maxmin: false, //开启最大化最小化按钮
                shade: [0],
                shadeClose: true,
                shade: false,
                area: ['30%', '10%'],
                offset: 'ct', //弹出
                time: 0,
                anim: 2,
                content: ['./alterBookInfo.jsp?id='+id, 'no']
            });
        })


        $("[name=btn3]").click(function () {
            var bookId = $(this).attr("id");

            //iframe窗
            layer.open({
                type: 2,
                title: false,
                closeBtn: 0, //不显示关闭按钮
                maxmin: false, //开启最大化最小化按钮
                shade: [0],
                shadeClose: true,
                shade: false,
                area: ['30%', '10%'],
                offset: 'rt', //弹出
                time: 0,
                anim: 2,
                content: ['./deleteBook.jsp?bookId='+bookId, 'no']
            });


        })
    });
</script>
</body>
</html>